{% extends "base.html" %}
{% block head %}
    <head>
        <meta charset="UTF-8">
        <title>测试管理系统</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <link rel="stylesheet" href="../../../static/layui/css/layui.css">
        <script src="../../../static/layui/layui.js"></script>
    <!--     <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script> -->
        <script type="text/javascript" src="../../../static/js/tool_p.js"></script>
{#<style>#}
{#    div{#}
{#        display: inline;#}
{#    }#}
{#</style>#}
    </head>
{% endblock head %}
{% block left %}
	{{ super() }}
{% endblock left %}
{% block right %}
	{{ super() }}
	<!-- 修改name（页面名称） -->
	{% set name = "结果查询" %}
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>{{name}}</legend>
	</fieldset>
	<!-- 页面私有部分 -->

<div style="width: 1920px">
        <div class="layui-form-item" style="display:inline-block;">
        <label class="layui-form-label">时间范围</label>
        <div class="layui-input-block">
            <input autocomplete="off" type="search" name="time_frame" class="layui-input" id="test10" placeholder=" 请选择时间范围 " style="width: 300px" >
        </div>
    </div>

        <div class="layui-form-item" style="display:inline-block;">
        <label class="layui-form-label">任务id</label>
        <div class="layui-input-block">
            <input type="search" id="task_id1" name="task_id" lay-verify="required" autocomplete="off"   placeholder=" 请输入任务id " class="layui-input" style="width: 150px" value="{{ task_id }}" >
        </div>
    </div>

            <div class="layui-form-item" style="display:inline-block;">
        <label class="layui-form-label">接口id</label>
        <div class="layui-input-block">
            <input type="search" id="api_id1" name="api_id" lay-verify="required" autocomplete="off"   placeholder=" 请输入接口id " class="layui-input" style="width: 150px" value="{{ api_id }}" >
        </div>
    </div>

    <div class="layui-form-item" style="display:inline-block;">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input type="search" id="res_id1" name="res_id" lay-verify="required" autocomplete="off"   placeholder=" 请输入日志编号 " class="layui-input" style="width: 150px" value="{{ res_id }}" >
        </div>
    </div>

        <div class="layui-form-item" style="display:inline-block;">
        <label class="layui-form-label">结果</label>
        <div class="layui-input-block">
            <input type="search" id="resq_code1" name="resq_code" lay-verify="required" autocomplete="off"   placeholder=" 请输入状态码 " class="layui-input" style="width: 150px" value="{{ resq_code }}" >
        </div>
    </div>

    <div class="layui-form-item" style="display:inline-block;">
        <button class="layui-btn layui-btn-danger" onclick="chaxun(this)" >查询</button>
    </div>

</div>



        <!--以下是数据展示-->
  <table id="abc" class="layui-table" style="width: 100% " >
    <colgroup>
        <col width=4%>
        <col width=10%>
        <col width=10%>
        <col width=20%>
        <col width=5%>
        <col width=20%>
        <col width=4%>
        <col width=5%>
        <col width=5%>
        <col width=10%>

    </colgroup>
    <thead>
      <tr>
          <th><div align="center">编号</div></th>
        <th><div align="center">任务名称</div></th>
        <th><div align="center" >接口名称</div></th>
        <th><div align="center">接口地址</div></th>
        <th><div align="center">请求方式</div></th>
          <th><div align="center">参数</div></th>
          <th><div align="center">结果</div></th>
          <th><div align="center">响应时间</div></th>
          <th><div align="center">详细信息</div></th>
          <th><div align="center">记录时间</div></th>
      </tr>
    </thead>
    <tbody>
      {% for i in res %}
        <tr>

        <td><div align="center" >{{i[0]}}</div></td>
        <td><div align="center" >{{i[1]}}</div></td>
        <td><div align="center" >{{i[2]}}</div></td>
        <td><div align="center" >{{i[3]}}</div></td>
        <td><div align="center" >{{i[4]}}</div></td>
        <td><div align="center" >{{i[5]}}</div></td>
        <td><div align="center" >{{i[6]}}</div></td>
        <td><div align="center" >{{i[7]}}</div></td>
        <td>		<span class="site-demo-button" id="layerDemo" >
			<button  value="{{ i[8] }}"data-method="offset" data-type="auto" data-value="{{ i[8] }}" class="layui-btn layui-btn-normal"
                    >查看详情
            </button>
		</span></td>
{#          {{ i[8] }}#}
        <td><div align="center" >{{i[9]}}</div></td>
      {% endfor %}
    </tbody>
  </table>
    <div id="test1"></div>
    <script>
function task_add(e){
 window.location.href="http://127.0.0.1:5000/monitor/task_add";
}

        function showClassDetail(detail_id, hiddenRow_id, class_type) {
            console.log(document.getElementById(hiddenRow_id).className)
    
            if ('详细' ==  document.getElementById(detail_id).innerText) {
                    if ('all' == class_type) {
                        document.getElementById(hiddenRow_id).className = 'all';
                    }
                    else if ('success' == class_type) {
                        document.getElementById(hiddenRow_id).className = 'success';
                    }
                    else if ('error' == class_type) {
                        document.getElementById(hiddenRow_id).className = 'error';
                    }
                    else{
                        document.getElementById(hiddenRow_id).className = 'untreaded';
                    }
                    document.getElementById(detail_id).innerText = "收起"
                    document.getElementById(hiddenRow_id).style.display = 'table-row';
            }
            else {
                    document.getElementById(detail_id).innerText = "详细"
                    document.getElementById(hiddenRow_id).style.display = 'none';
            }
        }

layui.use('laydate', function(){
  var laydate = layui.laydate;

  //日期时间选择器
  laydate.render({
    elem: '#test10'
    ,type: 'datetime'
    ,range: true
    ,value:'{{ time_frame }}'
  });
});

 	layui.use(['form', 'layedit', 'laydate'], function(){
  		var form = layui.form

	layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

  //触发事件
  var active = {
    setTop: function(){
      var that = this;
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '当你选择该窗体时，即会在最顶端'
        ,area: ['390px', '260px']
        ,shade: 0
        ,maxmin: true
        ,offset: [ //为了演示，随机坐标
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ]
        ,content: '//layer.layui.com/test/settop.html'
        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
        ,yes: function(){
          $(that).click();
        }
        ,btn2: function(){
          layer.closeAll();
        }

        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      });
    }
    ,confirmTrans: function(){
      //配置一个透明的询问框
      layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
        time: 20000, //20s后自动关闭
        btn: ['明白了', '知道了', '哦']
      });
    }
    ,notice: function(){
      //示范一个公告层
      layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['火速围观', '残忍拒绝']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
        ,success: function(layero){
          var btn = layero.find('.layui-layer-btn');
          btn.find('.layui-layer-btn0').attr({
            href: 'http://www.layui.com/'
            ,target: '_blank'
          });
        }
      });
    }
    ,offset: function(othis){
      var type = othis.data('type')
      ,text = othis.data('value')
          console.log(text)
          var newData = JSON.stringify(text, null, 4)

      layer.open({
        type: 1
        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+type //防止重复弹出
        ,title: '详情'
        ,area: ['1024px', '768px']
        ,content: '<xmp>'+ newData +'</xmp>'
        ,btn: '关闭全部'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
    }
  };

  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });

});

});
//分页
layui.use('laypage', function(){
  var laypage = layui.laypage;

  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,limit:20
    ,count: {{ count }}//数据总数，从服务端得到
    ,jump: function(obj, first){

    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数

    //首次不执行
    if(!first){
                var page=obj.curr
                         var xmlhttp;
                    var time_frame =document.getElementById('test10').value;//获得前端指定ID值的对象的value值
                    var task_id = document.getElementById('task_id1').value;
                    var api_id = document.getElementById('api_id1').value;
                    var res_id = document.getElementById('res_id1').value;
                    var resq_code = document.getElementById('resq_code1').value;
            xmlhttp = new XMLHttpRequest();
            var data ='{ "page" :"' + page + '","time_frame" :"' + time_frame + '","task_id":"'+ task_id +'","api_id":"'+ api_id +'","res_id":"'+res_id+'","resq_code":"'+resq_code+'"}';//把获取到的value值传递給后端
            xmlhttp.open("POST","report",true);
            xmlhttp.send(data);
            //每当 readyState 改变时，就会触发 onreadystatechange，事件readyState 属性存有 XMLHttpRequest 的状态信息。
            xmlhttp.onreadystatechange = function()
            {

          if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
                // 请求已完成，且响应已就绪
            {
document.getElementById("abc").innerHTML = xmlhttp.responseText  //获得指定ID值的对象的内嵌内容，向id为abc的对象插入内容

            }

            }


    }
    }
  });
});
//查询
    function chaxun() {
        var time_frame =document.getElementById('test10').value;//获得前端指定ID值的对象的value值
        var task_id = document.getElementById('task_id1').value;
        var api_id = document.getElementById('api_id1').value;
        var res_id = document.getElementById('res_id1').value;
        var resq_code = document.getElementById('resq_code1').value;
        {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST","report",true)
            var data='{ "page" :"1","time_frame" :"' + time_frame + '","task_id":"'+ task_id +'","api_id":"'+ api_id +'","res_id":"'+res_id+'","resq_code":"'+resq_code+'"}';
            xmlhttp.send(data);
            xmlhttp.onreadystatechange = function()
            {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
          {
              document.getElementById("abc").innerHTML = xmlhttp.responseText
          }
            }
         }
    
} 
</script>
{% endblock right %}
<!-- 此模板现有部分，除页面名称外，其他均不可编辑 -->
